<template>
    <div class="pagination-container">
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :layout="layout"
                :page-sizes="pageSizes"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup>
    const props = defineProps({
        total: {
            required: true,
            type: Number
        },
        page: {
            type: Number,
            default: 1
        },
        limit: {
            type: Number,
            default: 10
        },
        pageSizes: {
            type: Array,
            default() {
                return [5, 10, 50, 1000]
            }
        },
        layout: {
            type: String,
            default: 'total, prev, pager, next, sizes, jumper'
        }
    })

    const emit = defineEmits();
    const currentPage = computed({
        get() {
            return props.page
        },
        set(val) {
            emit('update:page', val)
        }
    })
    const pageSize = computed({
        get() {
            return props.limit
        },
        set(val) {
            emit('update:limit', val)
        }
    })

    function handleSizeChange(val) {
        if (currentPage.value * val > props.total) {
            currentPage.value = 1
        }
        emit('pagination', {page: currentPage.value, limit: val})
    }

    function handleCurrentChange(val) {
        emit('pagination', {page: val, limit: pageSize.value})
    }

</script>

<style lang="less" scoped>
.pagination-container {
    display: flex;
    justify-content: flex-end;
    background: #fff;
    padding: 16px 16px 0;
}
</style>
